import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import { api_member_info_bankList, api_member_info_delBank, api_member_log_get_list, api_member_info_index } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import Colors from '../constants/Colors';
import { show } from '../constants/Toast';
import MyListView from '../components/MyListView';

export default class MyWalletScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            userInfo: {},
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData(1);
            this.getUserInfo()
        })
    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyRightImageHeader title='我的钱包' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    ListHeaderComponent={
                        <View style={{}}>
                            <View style={{ backgroundColor: Colors.white, height: 150 * unitWidth, alignItems: 'center', justifyContent: 'center' }}>
                                <ImageBackground style={{
                                    width: 345 * unitWidth, height: 120 * unitWidth, paddingHorizontal: 40 * unitWidth,
                                    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'
                                }}
                                    resizeMode='stretch' source={require('../res/me_abgbg.png')}>
                                    <View>
                                        <Text style={{ color: Colors.white, fontSize: 18 }}>余额</Text>
                                        <Text style={{ color: Colors.white, fontSize: 24, marginTop: 10 * unitWidth }}>{this.state.userInfo.credit2}</Text>
                                    </View>
                                    <TouchableOpacity activeOpacity={0.5}
                                        style={{
                                            borderWidth: 0.5, borderColor: Colors.white, borderRadius: 20, alignItems: 'center', justifyContent: 'center',
                                            width: 70 * unitWidth, height: 26 * unitWidth
                                        }} onPress={() => { this.props.navigation.navigate('Withdrawal') }}>
                                        <Text style={{ color: Colors.white, fontSize: 15 }}>提现</Text>
                                    </TouchableOpacity>
                                </ImageBackground>
                            </View>
                            <View style={{ backgroundColor: Colors.colorF5, height: 40 * unitWidth, alignItems: 'center', justifyContent: 'center' }}>
                                <Text style={{ color: Colors.black, fontSize: 16 }}>-明细-</Text>
                            </View>
                        </View>
                    }
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                    canLoadMore={true}
                />
            </View>
        );
    }

    getItem({ item, index }) {
        return (
            <View style={{
                width: width,
                height: 77 * unitWidth,
                backgroundColor: Colors.white, justifyContent: 'center'
            }}>
                <View style={{
                    width: width, paddingHorizontal: 20 * unitWidth,
                    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'
                }}>
                    <View>
                        <Text style={{ color: Colors.black, fontSize: 14 }}>{item.title}</Text>
                        <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 10 * unitWidth, width: 250 * unitWidth }}>{item.remark}</Text>
                    </View>
                    <View style={{ alignItems: 'flex-end' }}>
                        <Text style={{ color: item.num > 0 ? Colors.colorRed : Colors.black, fontSize: 18 }}>{item.num > 0 ? `+${item.num}` : item.num}</Text>
                        <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 10 * unitWidth }}>{item.createtime}</Text>
                    </View>
                </View>
                {index == this.state.list.length - 1 ?
                    null : <View style={{ backgroundColor: Colors.colorE8, width: 338 * unitWidth, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        )
    }

    //获取
    getData(page) {
        let params = {
            'page': page
        }
        postFetch(api_member_log_get_list, params, {
            success: (response) => {
                if (page == 1) {
                    this.refs.MyListView.onHasMore();
                    this.setState({
                        list: response.result.list,
                    })
                } else {
                    if (response.result.list && response.result.list.length > 0) {
                        this.refs.MyListView.onHasMore();
                        this.setState({
                            list: this.state.list.concat(response.result.list),
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                this.refs.MyListView.onNoMore();
                show(response.result.message);
            }
        })
    }

    //获取用户信息
    getUserInfo() {
        let params = {

        }
        postFetch(api_member_info_index, params, {
            success: (response) => {
                global.userInfo = response.result;
                this.setState({
                    userInfo: response.result,
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}